<template>
	<view class="padd20 bg-white radius20 fo-blue">
		<!-- 头部 -->
		<view class="fo-gray flex just-spa-bet">
			<text class="mr20 fo-30">累计专注</text>
		</view>
		<!-- 内容 -->
		<view class="flex paddlr20 ali-cen just-spa-bet mt20">
			<view class="flex flex-col ali-cen">
				<text>次数</text>
				<view class="fo-40 mt10 font-wei600">{{Math.floor(count)}}</view>
			</view>
			<view class="flex flex-col ali-cen">
				<text>时长</text>
				<view class="fo-40 mt10 font-wei600">{{Math.floor(durations)}}</view>
			</view>
			<view class="flex flex-col ali-cen">
				<text>日均时长</text>
				<view class="fo-40 mt10 font-wei600">{{Math.floor(dayDuration)}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 数字加载动画
	import TweenLite from 'gsap'
	export default {
		props: {
			list: {
				type: Object,
				default: function() {
					return {}
				}
			}
		},
		name: "",
		mounted() {
			this.$nextTick(() => {
				TweenLite.to(this.$data, {
					duration: 1,
					count: this.list.count,
					durations: this.list.duration,
					dayDuration: this.list.dayDuration
				});
			})
		},

		data() {
			return {
				count: 0,
				durations: 0,
				dayDuration: 0,
			}
		}
	}
</script>

<style>
</style>
